<template>
    <div class="e-paper">
        <div id="TypeFieldabc" v-if="isSelect">
            <div style="border: 1px solid #ededed; border-radius: 5px; padding: 10px; background: #F2F2F2">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th width="60">&nbsp;</th>
                            <th style="text-align: left">答案</th>
                            <!--<th width="80">跳转序号</th>-->
                            <th style="text-align: left" width="100">得分</th>
                            <th width="60">
                                <el-button size="mini" type="primary" @click="addItem">增加答案</el-button>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(v,k) in paperList" :key="v.zimu">
                            <td style="text-align: right" v-text="v.zimu"></td>
                            <td>
                                <el-input size="mini" :value="v.title" @input="updatePaper($event,v,k,'title')"></el-input>
                            </td>
                            <td>
                                <el-input size="mini" :value="v.point" @input="updatePaper($event,v,k,'point')" type="number"></el-input>
                            </td>
                            <td>
                                <el-popconfirm icon="el-icon-info" iconColor="red" title="确定删除？" @confirm="deleteItem(k,v)" @onConfirm="deleteItem(k,v)">
                                    <el-button size="mini" type="danger" slot="reference" icon="el-icon-delete-solid"></el-button>
                                </el-popconfirm>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>
<style type="text/scss" lang="scss"></style>
<script>
    import { extend, isArray } from "@/utils/extend";

    export default {
        name: "e-paper",
        data() {
            return {
                isSelect: true,
            };
        },
        props: {
            value: [String],
            vo: Object,
            type: String,
            danxuanti: {
                type: String,
                default: "",
            },
            duoxuanti: {
                type: String,
                default: "",
            },
            panduanti: {
                type: String,
                default: "",
            },
            correctText: {
                type: String,
                default: "正确",
            },
            errorText: {
                type: String,
                default: "错误",
            },
        },
        watch: {
            type(val) {
                if (this.value.length == 0) {
                    if (this.panduanti.indexOf(val) != -1) {
                        // 这个是判断类型
                        // 直接帮忙设定为两个
                        if (this.paperList.length != 2 || this.paperList[0].title != this.correctText) {
                            var obj = [
                                {
                                    zimu: "A",
                                    title: this.correctText,
                                    point: 0,
                                },
                                {
                                    zimu: "B",
                                    title: this.errorText,
                                    point: 0,
                                },
                            ];
                            this.emitInput(obj);
                        }
                        this.isSelect = true;
                    } else if (this.danxuanti.indexOf(val) == -1 && this.duoxuanti.indexOf(val) == -1) {
                        this.isSelect = false;
                    } else {
                        if (this.paperList.length == 0) {
                            var obj = [
                                {
                                    zimu: "A",
                                    title: "",
                                    point: 0,
                                },
                                {
                                    zimu: "B",
                                    title: "",
                                    point: 0,
                                },
                                {
                                    zimu: "C",
                                    title: "",
                                    point: 0,
                                },
                                {
                                    zimu: "D",
                                    title: "",
                                    point: 0,
                                },
                            ];
                            this.emitInput(obj);
                        }
                        this.isSelect = true;
                    }
                }
            },
        },
        computed: {
            paperList() {
                var value = this.value;
                try {
                    value = JSON.parse(value);
                } catch (e) {
                    value = [];
                }
                if (!isArray(value)) {
                    value = [];
                }
                return value;
            },
        },
        methods: {
            updateZimu(paperList) {
                var zimu = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
                var result = paperList ? paperList : extend(true, [], this.paperList);
                for (var i = 0; i < result.length; i++) {
                    result[i].zimu = zimu.substr(i, 1);
                }
                this.emitInput(result);
            },
            updatePaper($event, v, k, key) {
                var result = extend(true, [], this.paperList);
                var obj = {};
                obj[key] = $event;
                var nowObj = extend(true, {}, v, obj);
                result[k] = nowObj;
                this.emitInput(result);
            },
            emitInput(val) {
                this.$emit("input", JSON.stringify(val));
            },
            addItem() {
                var zimu = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

                var result = extend(true, [], this.paperList);
                var index = result.length;
                var obj = {
                    zimu: zimu.substr(index, 1),
                    title: "",
                    point: 0,
                };
                result.push(obj);
                this.emitInput(result);
            },
            deleteItem(k) {
                var result = extend(true, [], this.paperList);
                result.splice(k, 1);
                this.updateZimu(result);
            },
        },
        created() {},
        mounted() {},
        destroyed() {},
    };
</script>
